var timer = null,
	index = 0,
	flag = 0,
	pics = document.getElementsByClassName("banner_item"),
	lis = document.getElementsByName("move_list"),
	clientWidth = document.documentElement.clientWidth;
console.log(clientWidth);
//封装一个代替getElementById()的方法
function byId(id) {
	return typeof(id) === "string" ? document.getElementById(id) : id;
}

function slideImg() {
	var move_pic = byId("move_pic");
	var banner = byId("banner");
	move_pic.onmouseover = function() {
		stopAutoPlay();
	}
	move_pic.onmouseout = function() {
		startAutoPlay();
	}
	move_pic.onmouseout();

//无线端禁止导航栏切换
	if(clientWidth > 768){
		//点击导航栏切换图片
		for(var i = 0; i < pics.length; i++) {
			lis[i].id = i;
			//给每个li项绑定点击事件
			lis[i].onclick = function() {
				//获取当前li项的index值
				index = this.id;
				changeImg();
			}
		}
	}
}
//开始播放轮播图
function startAutoPlay() {
	timer = setInterval(function() {
		index++;
		if(index > 2) {
			index = 0;
		}
		changeImg();
	}, 3000);
}
//暂停播放
function stopAutoPlay() {
	if(timer) {
		clearInterval(timer);
	}
}
//改变轮播图
function changeImg() {
	for(var i = 0; i < pics.length; i++) {
//		pics[i].style.opacity = "0";
		lis[i].className = "";
	}
	pics[flag].style.animationName = "fadeOutLeft";
	pics[index].style.animationName = "fadeInRight";
	lis[index].className = "changecolor";
	flag = index;
}
slideImg();


var wrap = document.querySelector('#move_pic');
// 初始化手指坐标点
var startPoint = 0;
var currPoint = 0;
var disX = 0;
var  clockFlag = false;
//手指按下
wrap.addEventListener("touchstart", function(e) {
	startPoint = e.changedTouches[0].pageX;
	stopAutoPlay();
});
//手指滑动
wrap.addEventListener("touchmove", function(e) {
	currPoint = e.changedTouches[0].pageX;
	disX = currPoint - startPoint;
});
//当手指抬起的时候，判断图片滚动
wrap.addEventListener("touchend", moveImg);
function moveImg() {
	for(var i = 0; i < pics.length; i++) {
//		pics[i].style.opacity = "0";
		lis[i].className = "";
	}
	if(disX <= 0){
		pics[index].style.animationName = "fadeOutLeft";
		if(index == 2){
			index = 0;		
			pics[index].style.animationName = "fadeInRight";
			lis[index].className = "changecolor";
			flag = index;
			
		}else{
			index = index + 1;
			pics[index].style.animationName = "fadeInRight";
			lis[index].className = "changecolor";
			flag = index;
		}
	}
	if(disX > 0){
		pics[index].style.animationName = "fadeOutRight";
		if(index == 0){
			index = 2;
			pics[index].style.animationName = "fadeInLeft";
			lis[index].className = "changecolor";
			flag = index;
		}else{
			index = index - 1;
			pics[index].style.animationName = "fadeInLeft";
			lis[index].className = "changecolor";
			flag = index;
		}
	}
	
}
startAutoPlay();